<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue学习总结 | 一只老鸟</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/img/rty-docs.ico">
    <script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-145250139-1"></script>
    <script>window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-145250139-1');</script>
    <script>var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?96bef00c01d8ee7ee249abc380b9e5ab";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();</script>
    <meta name="description" content="Welcome to my docs">
    <meta name="keywords" content="jkx,晋凯旋,jkxxmd,vue,js,html,css,英文歌曲,bruno">
    
    <link rel="preload" href="/assets/css/0.styles.eb327ba5.css" as="style"><link rel="preload" href="/assets/js/app.2b0e3d52.js" as="script"><link rel="preload" href="/assets/js/2.87232f21.js" as="script"><link rel="preload" href="/assets/js/26.ef22337a.js" as="script"><link rel="prefetch" href="/assets/js/10.1e2b3af9.js"><link rel="prefetch" href="/assets/js/11.bfd5eea1.js"><link rel="prefetch" href="/assets/js/12.11b2a8d0.js"><link rel="prefetch" href="/assets/js/13.d230b1b6.js"><link rel="prefetch" href="/assets/js/14.8208356f.js"><link rel="prefetch" href="/assets/js/15.badc1e67.js"><link rel="prefetch" href="/assets/js/16.76e6aeba.js"><link rel="prefetch" href="/assets/js/17.ea4ddef2.js"><link rel="prefetch" href="/assets/js/18.e3d36bd1.js"><link rel="prefetch" href="/assets/js/19.aa1bac84.js"><link rel="prefetch" href="/assets/js/20.838765cd.js"><link rel="prefetch" href="/assets/js/21.14466225.js"><link rel="prefetch" href="/assets/js/22.38392bba.js"><link rel="prefetch" href="/assets/js/23.71895fbc.js"><link rel="prefetch" href="/assets/js/24.766c8a49.js"><link rel="prefetch" href="/assets/js/25.6b02ff9f.js"><link rel="prefetch" href="/assets/js/27.0334ed21.js"><link rel="prefetch" href="/assets/js/28.811fb438.js"><link rel="prefetch" href="/assets/js/29.f687b8ad.js"><link rel="prefetch" href="/assets/js/3.3fc78177.js"><link rel="prefetch" href="/assets/js/30.0eef1a68.js"><link rel="prefetch" href="/assets/js/31.44dad2fc.js"><link rel="prefetch" href="/assets/js/32.959ca33d.js"><link rel="prefetch" href="/assets/js/33.d27370cb.js"><link rel="prefetch" href="/assets/js/34.73319d5f.js"><link rel="prefetch" href="/assets/js/35.09513538.js"><link rel="prefetch" href="/assets/js/36.c77663c8.js"><link rel="prefetch" href="/assets/js/37.89852ede.js"><link rel="prefetch" href="/assets/js/38.a9026d97.js"><link rel="prefetch" href="/assets/js/39.2cb07eac.js"><link rel="prefetch" href="/assets/js/4.50419328.js"><link rel="prefetch" href="/assets/js/40.7694c8be.js"><link rel="prefetch" href="/assets/js/41.0b071795.js"><link rel="prefetch" href="/assets/js/42.731a77fd.js"><link rel="prefetch" href="/assets/js/43.e340c04a.js"><link rel="prefetch" href="/assets/js/44.32723933.js"><link rel="prefetch" href="/assets/js/45.fddbc294.js"><link rel="prefetch" href="/assets/js/46.7227ca9a.js"><link rel="prefetch" href="/assets/js/47.e445b894.js"><link rel="prefetch" href="/assets/js/48.22f08eaa.js"><link rel="prefetch" href="/assets/js/49.1ee7be95.js"><link rel="prefetch" href="/assets/js/5.f4c7dd9b.js"><link rel="prefetch" href="/assets/js/50.620525ff.js"><link rel="prefetch" href="/assets/js/51.23ef9c37.js"><link rel="prefetch" href="/assets/js/52.ab599220.js"><link rel="prefetch" href="/assets/js/53.6f0a5a12.js"><link rel="prefetch" href="/assets/js/54.0af9ce80.js"><link rel="prefetch" href="/assets/js/55.9a619ce4.js"><link rel="prefetch" href="/assets/js/56.d3eb58e2.js"><link rel="prefetch" href="/assets/js/57.cec694aa.js"><link rel="prefetch" href="/assets/js/58.215ff512.js"><link rel="prefetch" href="/assets/js/59.67b4a2d9.js"><link rel="prefetch" href="/assets/js/6.35564b30.js"><link rel="prefetch" href="/assets/js/60.10fa328d.js"><link rel="prefetch" href="/assets/js/61.eb384a7b.js"><link rel="prefetch" href="/assets/js/62.21995735.js"><link rel="prefetch" href="/assets/js/63.d3376937.js"><link rel="prefetch" href="/assets/js/64.9dc17e46.js"><link rel="prefetch" href="/assets/js/65.faaf4be5.js"><link rel="prefetch" href="/assets/js/66.82d4fd2e.js"><link rel="prefetch" href="/assets/js/67.766e8bbb.js"><link rel="prefetch" href="/assets/js/68.e00a5e5f.js"><link rel="prefetch" href="/assets/js/69.0f9198d3.js"><link rel="prefetch" href="/assets/js/7.826495ef.js"><link rel="prefetch" href="/assets/js/70.05ef2cdd.js"><link rel="prefetch" href="/assets/js/71.0da0e95b.js"><link rel="prefetch" href="/assets/js/72.fd1cda42.js"><link rel="prefetch" href="/assets/js/73.907aa3c6.js"><link rel="prefetch" href="/assets/js/74.dec02a91.js"><link rel="prefetch" href="/assets/js/75.8610ce53.js"><link rel="prefetch" href="/assets/js/76.db9000c6.js"><link rel="prefetch" href="/assets/js/77.fa0311a2.js"><link rel="prefetch" href="/assets/js/78.33ae2bd0.js"><link rel="prefetch" href="/assets/js/79.879fa638.js"><link rel="prefetch" href="/assets/js/8.7a30ba0c.js"><link rel="prefetch" href="/assets/js/80.898b981f.js"><link rel="prefetch" href="/assets/js/81.b606e1f8.js"><link rel="prefetch" href="/assets/js/82.5006eb1e.js"><link rel="prefetch" href="/assets/js/83.604f41d2.js"><link rel="prefetch" href="/assets/js/84.2e649063.js"><link rel="prefetch" href="/assets/js/85.50f34442.js"><link rel="prefetch" href="/assets/js/86.aee7b865.js"><link rel="prefetch" href="/assets/js/87.9b812977.js"><link rel="prefetch" href="/assets/js/88.52e08a6c.js"><link rel="prefetch" href="/assets/js/9.7b6af510.js">
    <link rel="stylesheet" href="/assets/css/0.styles.eb327ba5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">一只老鸟</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" class="nav-link">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" class="nav-link">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/components/introduction.html" class="sidebar-link">导读</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>UI组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/UI/Vue总结.html" class="active sidebar-link">Vue学习总结</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#项目创建" class="sidebar-link">项目创建</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#命令" class="sidebar-link">命令</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#初始化项目" class="sidebar-link">初始化项目</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#git" class="sidebar-link">git</a></li></ul></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#project-setup" class="sidebar-link">Project setup</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#compiles-and-hot-reloads-for-development" class="sidebar-link">Compiles and hot-reloads for development</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#compiles-and-minifies-for-production" class="sidebar-link">Compiles and minifies for production</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#lints-and-fixes-files" class="sidebar-link">Lints and fixes files</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#customize-configuration" class="sidebar-link">Customize configuration</a></li></ul></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#组成部分" class="sidebar-link">组成部分</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#指令" class="sidebar-link">指令</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#模块化开发" class="sidebar-link">模块化开发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#安装sass语法写css" class="sidebar-link">安装sass语法写css</a></li></ul></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#事件" class="sidebar-link">事件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#v-on事件绑定" class="sidebar-link">v-on事件绑定</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#自定义事件" class="sidebar-link">自定义事件</a></li></ul></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#生命周期-页面从初始化到完成渲染-经过更新最后销毁的过程" class="sidebar-link">生命周期  页面从初始化到完成渲染，经过更新最后销毁的过程</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#创建阶段-第一次页面加载执行-后边不执行" class="sidebar-link">创建阶段 第一次页面加载执行  后边不执行</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#挂载阶段-第一次页面加载执行-后边不执行" class="sidebar-link">挂载阶段 第一次页面加载执行  后边不执行</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#更新阶段" class="sidebar-link">更新阶段</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#销毁阶段" class="sidebar-link">销毁阶段</a></li></ul></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#element-ui-https-element-eleme-cn-饿了么开发-pc端框架" class="sidebar-link">Element-ui https://element.eleme.cn/  饿了么开发  pc端框架</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#安装-npm-i-element-ui-s-或者-yarn-add-element-ui" class="sidebar-link">安装  npm i element-ui -S    或者 yarn add element-ui</a></li></ul></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#组件通信" class="sidebar-link">组件通信</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#ref" class="sidebar-link">ref</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#插槽slot" class="sidebar-link">插槽slot</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#匿名插槽" class="sidebar-link">匿名插槽</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#具名插槽" class="sidebar-link">具名插槽</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#作用域传参" class="sidebar-link">作用域传参</a></li></ul></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#watch-监听器" class="sidebar-link">watch 监听器</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#计算属性computed" class="sidebar-link">计算属性computed</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#keep-alive缓存组件状态" class="sidebar-link">keep-alive缓存组件状态</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#computed设置值" class="sidebar-link">computed设置值</a></li></ul></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#动态加载组件-component" class="sidebar-link">动态加载组件 component</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#递归组件" class="sidebar-link">递归组件</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#filter-自定义过滤器" class="sidebar-link">filter 自定义过滤器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#组件过滤器" class="sidebar-link">组件过滤器</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#全局过滤器" class="sidebar-link">全局过滤器</a></li></ul></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#自定义指令-directive" class="sidebar-link">自定义指令 directive</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#组件内自定义指令" class="sidebar-link">组件内自定义指令</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#全局自定义指令" class="sidebar-link">全局自定义指令</a></li></ul></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#插件的开发和使用" class="sidebar-link">插件的开发和使用</a></li><li class="sidebar-sub-header"><a href="/components/UI/Vue总结.html#全局函数的绑定" class="sidebar-link">全局函数的绑定</a></li></ul></li><li><a href="/components/UI/分页.html" class="sidebar-link">分页 pagination</a></li><li><a href="/components/UI/加载.html" class="sidebar-link">加载 loading</a></li><li><a href="/components/UI/单选框.html" class="sidebar-link">单选框 Radio</a></li><li><a href="/components/UI/对话框.html" class="sidebar-link">对话框 dialog</a></li><li><a href="/components/UI/按钮.html" class="sidebar-link">按钮 button</a></li><li><a href="/components/UI/提示气泡.html" class="sidebar-link">气泡提示 pop</a></li><li><a href="/components/UI/进度条.html" class="sidebar-link">进度条 progress</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vue学习总结"><a href="#vue学习总结" class="header-anchor">#</a> Vue学习总结</h1> <h2 id="项目创建"><a href="#项目创建" class="header-anchor">#</a> 项目创建</h2> <p>nodejs=》安装全局脚手架工具【只需安装一次就想】 npm i -g @vue/li 或者yarn add global @vue/cli  =》创建香炉
vue ui 或者vue create 项目名称=》项目在目录里，使用npm run serve或者yarn serve启动本地项目开发模式</p> <h2 id="命令"><a href="#命令" class="header-anchor">#</a> 命令</h2> <p>npm install --global @vue/cli
yard add global @vue/cli</p> <h2 id="初始化项目"><a href="#初始化项目" class="header-anchor">#</a> 初始化项目</h2> <p>举例 进公司以后  公司会给你一个git地址  git clone git项目地址
克隆完之后 需要安装依赖包 npm i 或者yarn 然后开始下载 node_moduls
如果vue create或者vue ui 创建项目不成功 ，git clone地址  克隆完</p> <h3 id="git"><a href="#git" class="header-anchor">#</a> git</h3> <p>团队开发git
【码云】
一、组长创建仓库，上传代码，邀请组员
设计项目结构 凡是属于全局的地方都是专人负责，避免代码冲突
二、组员：
1.克隆项目 git clone 地址
2.进入项目中安装依赖 npm i/yarn
3.启动服务 开始编码
4.开发完一个大的功能之后要写文档</p> <p>三、git工作操作流程
1.每开发完一个功能就需要提交一次
2.提交流程 git add -A
git commit -m &quot;日志&quot;
git pull  检测有没有冲突
git  push
3.如果git pull有冲突  要解决冲突，解决完再git add -A 陆续后续操作
4.公司日常  每天打开电脑 先git pull一下</p> <h2 id="project-setup"><a href="#project-setup" class="header-anchor">#</a> Project setup</h2> <div class="language- extra-class"><pre class="language-text"><code>yarn install
</code></pre></div><h3 id="compiles-and-hot-reloads-for-development"><a href="#compiles-and-hot-reloads-for-development" class="header-anchor">#</a> Compiles and hot-reloads for development</h3> <div class="language- extra-class"><pre class="language-text"><code>yarn serve
</code></pre></div><h3 id="compiles-and-minifies-for-production"><a href="#compiles-and-minifies-for-production" class="header-anchor">#</a> Compiles and minifies for production</h3> <div class="language- extra-class"><pre class="language-text"><code>yarn build
</code></pre></div><h3 id="lints-and-fixes-files"><a href="#lints-and-fixes-files" class="header-anchor">#</a> Lints and fixes files</h3> <div class="language- extra-class"><pre class="language-text"><code>yarn lint
</code></pre></div><h3 id="customize-configuration"><a href="#customize-configuration" class="header-anchor">#</a> Customize configuration</h3> <p>See <a href="https://cli.vuejs.org/config/" target="_blank" rel="noopener noreferrer">Configuration Reference<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <h2 id="组成部分"><a href="#组成部分" class="header-anchor">#</a> 组成部分</h2> <p>1.el 绑定根容器 一旦绑定容器里的内容就会被vue解析
2.data 双向监听响应的数据
3.methods 给事件触发的回调函数</p> <h2 id="指令"><a href="#指令" class="header-anchor">#</a> 指令</h2> <p>1.插值与v-text
可渲染数据类型：字符串 数字  布尔 数组 带有返回值的函数调用  对象
功能  渲染文本
2. v-html
v-text可以做的  v-html都可以做，主要功能：渲染字符串类型的Dom片段</p> <p>3.v-for
渲染数组和对象 还有解构的使用</p> <p>nodejs 把电脑放在谷歌浏览器环境中
webpack工具     webpack封装的vue的脚手架     执行vue项目</p> <p>npm相当于迅雷 用来下载东西，官方：npm是包管理器  npm是属于node软件的</p> <p>4.v-if 控制元素的加载与销毁  属于回流，用js控制元素。对浏览器性能开销大。</p> <p>5.v-show 控制元素的显示与隐藏 属于重绘，用css控制display  display:none显示/display:block隐藏属性。对浏览器性能开销小。
如果频繁切换  需要使用v-show 性能来说比较好</p> <p>6.v-for循环渲染指令
语法：v-for=&quot;(值，下标) in 数据&quot; ：key=&quot;唯一的值&quot;
值：如果是纯值  value就可以 [1,2,3,4]
如果是对象，名字叫item [{name:&quot;xx&quot;},{}]
下标  index
key：由于v-for循环渲染遍历出来的是通过js算法得到的虚拟DOM，那么当需要修改其中某个元素的时候，如果不加key，
每次变动都要重新循环计算生成，对性能开销大<br>
key就是每一个虚拟dom元素的身份证，表示元素的唯一标识，这样在修改的时候通过key，只对该元素修改</p> <p>虚拟DOM  用js计算出来的，不是原生的标签</p> <p>7.v-bind： 简写：
绑定属性，可以绑定原生属性，也可以绑定自定义属性
v-on： 缩写 @
绑定事件，既可以绑定原生事件，也可以绑定自动以事件</p> <h2 id="模块化开发"><a href="#模块化开发" class="header-anchor">#</a> 模块化开发</h2> <p>模块化开发解决的就是耦合度高的问题，让程序把一些可以多次复用的资源进行提取，提取成独立的模块，哪里使用就引入到哪里
从而降低了迭代的成本。加快了开发效率和维护的遍历。</p> <h3 id="安装sass语法写css"><a href="#安装sass语法写css" class="header-anchor">#</a> 安装sass语法写css</h3> <p>安装命令：yarn add sass sass-loader -D
npm i sass sass-loader -D</p> <blockquote><blockquote><blockquote><p>深度选择器 在style标签里 需要改的标签前加  修改样式</p></blockquote></blockquote></blockquote> <h2 id="事件"><a href="#事件" class="header-anchor">#</a> 事件</h2> <h3 id="v-on事件绑定"><a href="#v-on事件绑定" class="header-anchor">#</a> v-on事件绑定</h3> <p>使用v-on：事件类型=回调函数</p> <p>event.target获取触发事件的元素
event.currentTarget 获取事件绑定的元素</p> <h4 id="事件修饰符"><a href="#事件修饰符" class="header-anchor">#</a> 事件修饰符</h4> <p>语法 @click.stop=&quot;fn&quot; 阻止冒泡
@click.prevent=&quot;fn&quot; 阻止默认事件
@click.native=&quot;fn&quot; 绑定原生事件</p> <h4 id="按键修饰符"><a href="#按键修饰符" class="header-anchor">#</a> 按键修饰符</h4> <p>.13 或者.enter  回车修饰符  按回车时才会触发</p> <h3 id="自定义事件"><a href="#自定义事件" class="header-anchor">#</a> 自定义事件</h3> <p>语法 @自定义事件名称=“回调函数”
使用场景：用于父子通信  子组件向父组件传参 $emit()
监听键盘小例子  enter例子  鼠标移入移出小例子</p> <h2 id="生命周期-页面从初始化到完成渲染-经过更新最后销毁的过程"><a href="#生命周期-页面从初始化到完成渲染-经过更新最后销毁的过程" class="header-anchor">#</a> 生命周期  页面从初始化到完成渲染，经过更新最后销毁的过程</h2> <h3 id="创建阶段-第一次页面加载执行-后边不执行"><a href="#创建阶段-第一次页面加载执行-后边不执行" class="header-anchor">#</a> 创建阶段 第一次页面加载执行  后边不执行</h3> <p>beforeCreate  创建前
created  创建成功</p> <h3 id="挂载阶段-第一次页面加载执行-后边不执行"><a href="#挂载阶段-第一次页面加载执行-后边不执行" class="header-anchor">#</a> 挂载阶段 第一次页面加载执行  后边不执行</h3> <p>beforeMount 挂在前
mounted  挂在成功
当组件被展示在html里时，这个函数就执行了，用于自动发起请求等操作</p> <h3 id="更新阶段"><a href="#更新阶段" class="header-anchor">#</a> 更新阶段</h3> <p>无论是自己还是父级组件，当data或props的数据被修改时触发
该阶段函数中不可以修改data数据，否则会造成回调+回调 死循环 递归
beforeUpdate 更新前
updated 更新后</p> <h3 id="销毁阶段"><a href="#销毁阶段" class="header-anchor">#</a> 销毁阶段</h3> <p>当父组件使用v-if控制当前组件不显示时，意味着该组件被销毁了
beforeDestroy 销毁前
用于清理销毁全局变量或常驻内存的垃圾数据：定时器
destroyed 销毁后</p> <h2 id="element-ui-https-element-eleme-cn-饿了么开发-pc端框架"><a href="#element-ui-https-element-eleme-cn-饿了么开发-pc端框架" class="header-anchor">#</a> Element-ui https://element.eleme.cn/  饿了么开发  pc端框架</h2> <p>移动框架 vant  有赞前端开发</p> <h3 id="安装-npm-i-element-ui-s-或者-yarn-add-element-ui"><a href="#安装-npm-i-element-ui-s-或者-yarn-add-element-ui" class="header-anchor">#</a> 安装  npm i element-ui -S    或者 yarn add element-ui</h3> <h2 id="组件通信"><a href="#组件通信" class="header-anchor">#</a> 组件通信</h2> <p>父传子 props
子传父 this.$emit + v-on
父子双向通信 .sync修饰符  修改用$emit(&quot;update:prop&quot;,新数据)
父子通信 v-model 子组件注入value和input函数
跨级通信 $attrs $listener
全局通信 <code>vuex</code></p> <h2 id="ref"><a href="#ref" class="header-anchor">#</a> ref</h2> <p>语法：<code>&lt;Me ref=&quot;refName&quot;&gt;&lt;/Me&gt;</code>
获取 <code>this.$refs.refName</code>
获取元素的，一般用于js动画，轮播图，如果是添加到自定义组件上，那么就是获取自定义组件的实例对象</p> <h2 id="插槽slot"><a href="#插槽slot" class="header-anchor">#</a> 插槽slot</h2> <p>模板 传入不同的内容片段
适用于 开发静态页面 高复用的模板组件
slot不会渲染改变任何标签，不会产生任何的dom节点</p> <h3 id="匿名插槽"><a href="#匿名插槽" class="header-anchor">#</a> 匿名插槽</h3> <p>语法 父组件将内容写在自定义组件的内部，自定义组件使用<code>&lt;slot&gt;</code>接收</p> <h3 id="具名插槽"><a href="#具名插槽" class="header-anchor">#</a> 具名插槽</h3> <p>区分接收，对应名称。
语法 父组件使用<code>&lt;template v-slot:name&gt;</code>
子组件 <code>&lt;slot name='name'&gt;</code>
*注意：匿名插槽默认叫v-slot:default=&quot;{}&quot;</p> <h3 id="作用域传参"><a href="#作用域传参" class="header-anchor">#</a> 作用域传参</h3> <p>父组件可直接写入数据</p> <h4 id="子组件传给父组件"><a href="#子组件传给父组件" class="header-anchor">#</a> 子组件传给父组件</h4> <p>子组件传递<code>&lt;slot data='123' name=&quot;A&quot;&gt;</code>
父组件接收 <code>&lt;template v-slot:A=&quot;scoped&quot;&gt;</code></p> <h2 id="watch-监听器"><a href="#watch-监听器" class="header-anchor">#</a> watch 监听器</h2> <p>对数据进行监听，当数据变化时会触发函数，进行业务操作
语法：单值监听<code>data（newVal，oldVal）{}</code>，
监听对象或数组
<code>js watch:{ data：{ deep:true, handler(newV,oldV){ } } }</code>
监听对象里某一个属性</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string">&quot;obj.name&quot;</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span>old<span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div><p>默认执行一次 <code>immediate：true</code></p> <h2 id="计算属性computed"><a href="#计算属性computed" class="header-anchor">#</a> 计算属性computed</h2> <div class="language- extra-class"><pre><code>对一个监听数据进行计算并返回一个新值。该值和data/props一样都是挂载到实例对象this上的

优点：不受数据类型的限制 没有深度监听的概念
缺点：开辟了一个新的内存空间，对其进行修改比较的繁琐，因为默认它是只读的。
</code></pre></div><p>特性：有缓存机制，当被监听的数据发生了修改会用当前的缓存数据对比修改后的数据，如果一致则不触发计算函数</p> <h3 id="keep-alive缓存组件状态"><a href="#keep-alive缓存组件状态" class="header-anchor">#</a> keep-alive缓存组件状态</h3> <p>它是内置组件 用来缓存包裹着的组件的状态
使用场景：表单填写页面 ，如果离开需要保持输入内容不丢失  就需要使用该组件包裹
属性 include包含  exclude不包含 可以写数组 字符串等
状态存在内存中，如果页面关闭或刷新就会丢失状态</p> <h3 id="computed设置值"><a href="#computed设置值" class="header-anchor">#</a> computed设置值</h3> <p>如果需要强制给计算属性值进行赋值的话，需要写成对象模式
语法 <code>js newData：{ get（）{ return this.data}， set（value）{this.data=value} }</code></p> <h2 id="动态加载组件-component"><a href="#动态加载组件-component" class="header-anchor">#</a> 动态加载组件 component</h2> <p>内置组件的一种 用于动态加载组件
必须使用它的is属性 去匹配挂载好的组件 进行渲染
等价于 自己去写v-if  在页面销毁与渲染</p> <h2 id="递归组件"><a href="#递归组件" class="header-anchor">#</a> 递归组件</h2> <p>数据来自父组件
递归组件必须要有name 选项，并且name的值必须是文件的名称（Tree）
子组件自己引用自己</p> <h2 id="filter-自定义过滤器"><a href="#filter-自定义过滤器" class="header-anchor">#</a> filter 自定义过滤器</h2> <p>在不修改原数据的情况下，对数据进行操作，得到新值
语法 data | filter1 | filter2</p> <h3 id="组件过滤器"><a href="#组件过滤器" class="header-anchor">#</a> 组件过滤器</h3> <p>filters 只限当前组件使用
api:filters（）</p> <h3 id="全局过滤器"><a href="#全局过滤器" class="header-anchor">#</a> 全局过滤器</h3> <p>filter 在main.js里设置 可以在整个项目当中使用
api:Vue.filter(&quot;过滤器名字&quot;，回调函数(value)=&gt;{})</p> <h2 id="自定义指令-directive"><a href="#自定义指令-directive" class="header-anchor">#</a> 自定义指令 directive</h2> <p>可以在组件上使用 v-<em>的形式 优雅的处理我们要的业务
举例：页面打开时 给input框自动获取焦点事件，页面打开时，让元素透明度根据某个值发生变化 el操作dom。
特性 专门用来处理dom元素 比ref高级
语法：v-</em></p> <h3 id="组件内自定义指令"><a href="#组件内自定义指令" class="header-anchor">#</a> 组件内自定义指令</h3> <p>语法：
directives:{
myfocus:{
inserted(el){
el.focus();
}
}
}</p> <h3 id="全局自定义指令"><a href="#全局自定义指令" class="header-anchor">#</a> 全局自定义指令</h3> <p>语法：
Vue.directive(&quot;自定义名字focus&quot;, {
inserted(el) { el.focus() }
}),</p> <h2 id="插件的开发和使用"><a href="#插件的开发和使用" class="header-anchor">#</a> 插件的开发和使用</h2> <p>创建插件语法 {
install:function(Vue){}
}
使用插件语法 Vue.use(myPlugin,{配置对象})</p> <h2 id="全局函数的绑定"><a href="#全局函数的绑定" class="header-anchor">#</a> 全局函数的绑定</h2> <p>-在组件的this上使用，用Vue.prototype.myMethod=function(){}声明
-使用Vue构造器使用，用Vue.myMrthod=()=&gt;{}</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/jgsrty/jgsrty.github.docs/edit/master/docs/components/UI/Vue总结.md" target="_blank" rel="noopener noreferrer">Edit this page</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">12/23/2020, 4:59:13 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/components/introduction.html" class="prev">
        导读
      </a></span> <span class="next"><a href="/components/UI/分页.html">
        分页 pagination
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.2b0e3d52.js" defer></script><script src="/assets/js/2.87232f21.js" defer></script><script src="/assets/js/26.ef22337a.js" defer></script>
  </body>
</html>
